<template>
    <div class="list_box">
        <div class="list_box_but">
            <el-button type="primary">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiahao1"></use>
                </svg>
                新增菜单</el-button
            >
        </div>
        <div class="list_table">
            <el-table :data="tableData" style="margin-bottom: 20px" row-key="id">
                <!-- <el-table-column prop="id" label="ID" width="80" /> -->
                <el-table-column prop="title" label="展示名称" width="120" />
                <el-table-column prop="name" label="路由Name" width="100" />
                <el-table-column prop="routerUrl" label="路由Path" width="200" />
                <el-table-column prop="isHide" label="是否隐藏" width="80" />
                <el-table-column prop="parentId" label="父节点" width="80" />
                <el-table-column prop="sort" label="排序" width="80" />
                <el-table-column prop="component" label="文件路径" width="240" />
                <el-table-column prop="icon" label="图标" width="180">
                    <template #default="scope">
                        <svg class="icon menu_icon" aria-hidden="true">
                            <use :xlink:href="scope.row.icon"></use>
                        </svg>
                        {{ scope.row.icon }}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" fixed="right" width="240">
                    <el-button size="small" class="table-button">
                        <svg class="icon inner_icon" aria-hidden="true">
                            <use xlink:href="#icon-addNode"></use>
                        </svg>
                        添加子菜单</el-button
                    >
                    <el-button size="small" class="table-button">
                        <svg class="icon inner_icon" aria-hidden="true">
                            <use xlink:href="#icon-bianji4"></use>
                        </svg>
                        编辑</el-button
                    >
                    <el-button size="small">
                        <svg class="icon inner_icon" aria-hidden="true">
                            <use xlink:href="#icon-shanchu5"></use>
                        </svg>
                        删除</el-button
                    >
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const tableData: any = [
    {
        id: 1,
        name: "dashboard",
        routerUrl: "/dashboard",
        isHide: 2,
        parentId: 0,
        sort: 1,
        component: "views/dashboard/index.vue",
        title: "仪表盘",
        icon: "#icon-pc",
        children: [
            {
                id: 2,
                name: "analysis",
                routerUrl: "/dashboard/analysis",
                isHide: 2,
                parentId: 1,
                sort: 1,
                component: "views/dashboard/analysis/analysis.vue",
                title: "分析页",
                icon: "#icon-pc",
            },
            {
                id: 3,
                name: "workbench",
                routerUrl: "/dashboard/workbench",
                isHide: 2,
                parentId: 1,
                sort: 1,
                component: "views/dashboard/workbench/workbench.vue",
                title: "工作台",
                icon: "#icon-diannao",
            },
        ],
    },
    {
        id: 4,
        name: "system",
        routerUrl: "/system",
        isHide: 2,
        parentId: 0,
        sort: 1,
        component: "views/system/index.vue",
        title: "系统管理",
        icon: "#icon-xt8",
        children: [
            {
                id: 5,
                name: "user",
                routerUrl: "/system/user",
                isHide: 2,
                parentId: 4,
                sort: 1,
                component: "views/system/user/user.vue",
                title: "系统管理",
                icon: "#icon-jiaosequnti",
            },
            {
                id: 6,
                name: "role",
                routerUrl: "/system/role",
                isHide: 2,
                parentId: 4,
                sort: 1,
                component: "views/system/role/role.vue",
                title: "角色管理",
                icon: "#icon-diannao",
            },
            {
                id: 7,
                name: "menu",
                routerUrl: "/system/menu",
                isHide: 2,
                parentId: 4,
                sort: 1,
                component: "views/system/menu/menu.vue",
                title: "菜单管理",
                icon: "#icon-xt8",
            },
        ],
    },
];
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";
svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    margin-right: 4px;
}
.inner_icon {
    fill: #4d70ff;
    margin-right: 2px;
}
.menu_icon {
    fill: #666;
}
.inner_icon:hover {
    fill: #2d56fa;
}
</style>
